<template>
    <div id="app" class="content">
        <el-row>
            <el-col :span="24">
                <myheader/>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <mymenu />
            </el-col>
        </el-row>
        <el-row >
            <el-col :span="14" :offset="5">
                <div>
                    <router-view></router-view>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import gh from './components/GoHorse.vue'
import mn from './components/Menu.vue'
export default {
    name: 'App',
    components: {
        myheader: gh,
        mymenu: mn,
    },
    methods: {
        mouseMove (e) {
            var trail = document.createElement('div');
            trail.className = 'trail';
            document.body.appendChild(trail);
            trail.style.left = e.pageX + 'px';
            trail.style.top = e.pageY + 'px';

            setTimeout( ()=> {
                trail.style.transform = 'scale(2)';
                trail.style.opacity = '0';
            }, 100);
            // 一定事件后清除
            setTimeout(() =>{
                document.body.removeChild(trail);
            }, 600);
        },
    },
    mounted() {
        /*这里是给整个页面添加了一个鼠标移动的监听事件 e为事件对象*/
        document.addEventListener(`mousemove`, this.mouseMove);
    },
    beforeDestroy() {
        document.removeEventListener(`mousemove`, this.mouseMove);
    },
};
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    overflow: hidden;
}
@keyframes gradientBackground {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.content {
    /* margin-top: 10px;
    padding-top: 20px; */
    /* 确保内容不覆盖走马灯 */
    font-family: "Lato", sans-serif;
    background: linear-gradient(270deg, #ba62f5, #fdd1af, #86a8e7, #91eac9);
    background-size: 600% 6%;
    animation: gradientBackground 25s ease infinite;
}
  
.trail {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.3s;
    position: absolute;
    box-shadow: 5px 5px 10px #489dcf, -5px -5px 10px #62d5ff;
    animation: blow 4s linear infinite;
    -webkit-animation: blow 3s linear infinite;
}
</style>
